<template>
   <form>
    <input type="number" v-model="handleUserData.id" hidden/>
    <div class="input-group">
      <span class="input-group-addon">用 户 名</span>
      <span class="form-control"> {{ handleUserData.username }} </span>
    </div>
    <div class="input-group top10">
      <span class="input-group-addon">新 密 码</span>
      <input type="password" class="form-control" v-model="handleUserData.password" />
    </div>
    <div class="input-group top10">
      <span class="input-group-addon">确认密码</span>
      <input type="password" class="form-control" v-model="handleUserData.compPW" />
    </div>
    <div class="input-grop top20 center">
      <el-button size="small" @click="closeDialog">取 消</el-button>
      <el-button size="small" type="success" @click="updateUser">提 交</el-button>
    </div>
  </form>
</template>
<script>
export default {
  name: 'ChangePW',
  data () {
    return {
      handleUserData: {}
    }
  },
  props: {
    user: {
      type: Object
    }
  },
  methods: {
    closeDialog () {
      this.$emit('close')
    },
    updateUser () {
      if (this.handleUserData.password !== this.handleUserData.compPW) {
        // console.log(this.handleUserData)
        alert('确认密码与新密码不匹配')
        this.handleUserData.password = this.handleUserData.compPW = null
        return false
      }
      let formData = new FormData()
      formData.append('password', this.handleUserData.password)
      formData.append('id', this.handleUserData.id)

      this.$http.post('api/user/resetPassword', formData).then(
        response => {
          alert(response.data.message);
          this.handleUserData = {}
          this.closeDialog()
        },
        response => {
          alert(response.body.message ? response.body.message : response.body.error)
          console.log('error', response)
        }
      )
    }
  },
  watch: {
    user: {
      handler: function (val) {
        // console.log(val)
        this.handleUserData = val
      }
    }
  },
  created () {
    this.handleUserData = this.user
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-group{margin-bottom: 10px;}
</style>
